<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta id="viewport" name="viewport"
        content="width=device-width, initial-scale=1.0, maximum-scale=1, user-scalable=no">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>综合管理平台-首页</title>
    <link type="favicon" rel="shortcut icon" href="./static/img/favicon.ico" />
    <link rel="stylesheet" href="./static/css/bootstrap.css">
    <link rel="stylesheet" href="./static/css/init.css">
    <link rel="stylesheet" href="./static/less/index.css">
    <link href="./static/css/spop.min.css" rel="stylesheet" />
    <script src="./static/js/Syunew6.js"></script>
    <script src="./static/js/isLogin.js"></script>
</head>

<body>
    <div id="index" class="index-box common-box">
        <div class="screen-lg">
            <div class="welcome-box col-lg-4 col-md-4 col-sm-12 col-xs-12">
                <div class="head-img">
                    <div class="img">
                        <img :src="baseUrl + userData.headImg" alt="">
                    </div>
                    <div class="name">
                        <p>欢迎您！</p>
                        <p>{{userData.userName}}</p>
                    </div>
                </div>
                <div class="message-box">
                    <div class="panel panel-default one-box">
                        <div class="panel-heading">办公系统待审消息提醒</div>
                        <div class="table-box">
                            <ul class="news-list">
                                <li class="one th">
                                    <p class="id center">#</p>
                                    <p class="title">标题</p>
                                    <p class="time center">时间</p>
                                </li>
                                <li class="one" v-for="(item,i) in msgList" :key="i" @click="newsPage(item)">
                                    <p class="id center">{{i + 1}}</p>
                                    <p class="title" :title="item.msgTitle">{{item.msgTitle}}</p>
                                    <p class="time center">{{item.createTime}}</p>
                                </li>
                                <li class="one center" v-show="msgList.length < 1" title="点击重新加载" @click="getMsgList">
                                    <img v-show="msgLoading" src="/static/img/loading.gif" alt="">
                                    <span v-show="!msgLoading">暂无数据</span>
                                </li>
                            </ul>
                        </div>
                    </div>
                    <div class="panel panel-default one-box">
                        <div class="panel-heading">新闻公告</div>
                        <div class="table-box">
                            <ul class="news-list">
                                <li class="one th">
                                    <p class="id center">#</p>
                                    <p class="title">标题</p>
                                    <p class="time center">时间</p>
                                </li>
                                <li class="one" v-for="(item,i) in newsList" :key="i" @click="newsPage(item)">
                                    <p class="id center">{{i + 1}}</p>
                                    <p class="title" :title="item.post_title">{{item.post_title}}</p>
                                    <p class="time center">{{item.time}}</p>
                                </li>
                                <li class="one center" v-show="newsList.length < 1" title="点击重新加载" @click="getNewsList">
                                    暂无数据</li>
                            </ul>
                        </div>
                    </div>
                </div>
                <div class="time-box">
                    <div class="time">{{time}}</div>
                    <div class="date">
                        <p>{{date}}</p>
                        <p>星期{{week}}</p>
                    </div>
                </div>
            </div>
            <div class="con-box">
                <div class="logout">
                    <span @click="setAccount" class="cus">
                        <i class="glyphicon glyphicon-user"></i>
                        <span>账户设置</span>
                    </span>
                    <span @click="logout" class="cus" style="margin-left:20px">
                        <i class="glyphicon glyphicon-log-out"></i>
                        <span>登出</span>
                    </span>
                </div>
                <div class="menu-box">
                    <div class="menu-one" v-for="(item,index) in menu" :key="index" :style="item.style"
                        @click="clickMenu(item)" v-if="menuConfig(item.title)"><img class="menu-img"
                            :src="imgBaseUrl+item.img"><span class="title">{{item.title}}</span></div>
                    <div class="menu-one" style="background-color:rgba(119,121,121,.85)"
                        @click="clickMenu({url:'/addMenu.html',newWindow: false,phone: 1})" v-if="menuConfig('新增')">
                        <img class="menu-img" src="static/img/icon/增加.png">
                        <span class="title">新增</span>
                    </div>
                </div>
            </div>
        </div>
        <div class="screen-md">
            <div class="head-box">
                <div class="head-img">
                    <div class="img"><img src="./static/img/head.png" alt=""></div>
                    <div class="name">
                        <p>欢迎您！</p>
                        <p>{{userData.userName}}</p>
                    </div>
                    <div class="logout" @click="logout">
                        <i class="glyphicon glyphicon-log-out"></i>
                        <span>登出</span>
                    </div>
                </div>
                <!-- <div class="time-box">
                    <div class="time">{{time}}</div>
                    <div class="date">
                        <p>{{date}}</p>
                        <p>星期{{week}}</p>
                    </div>
                </div> -->
            </div>
            <div class="menu-box">
                <div class="menu-one" v-for="(item,index) in menu" :key="index" :style="item.style"
                    v-if="menuConfig(item.title)" @click="clickMenu(item)"><img class="menu-img"
                        :src="imgBaseUrl+item.img"><span class="title">{{item.title}}</span></div>
                <div class="menu-one" style="background-color:rgba(119,121,121,.85)" v-if="menuConfig('新增')"
                    @click="clickMenu({url:'/addMenu.html',newWindow: false,phone: 1})">
                    <img class="menu-img" src="/static/img/icon/增加.png">
                    <span class="title">新增</span>
                </div>
            </div>
            <!-- <div class="message-box">
                <div class="panel panel-default one-box">
                    <div class="panel-heading">办公协同系统消息提醒</div>
                    <div class="table-box">
                        <table class="table">
                            <thead>
                                <tr>
                                    <th class="wb10 center">#</th>
                                    <th class="wb50">标题</th>
                                    <th class="wb20 center">类别</th>
                                    <th class="wb20 center">时间</th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr>
                                    <th class="center">1</th>
                                    <th class="title">浣花溪1111111111111</th>
                                    <th class="center">代审</th>
                                    <th class="center">2018.11.11</th>
                                </tr>
                                <tr>
                                    <th class="center">2</th>
                                    <th class="title">浣花溪1111111111111</th>
                                    <th class="center">代审</th>
                                    <th class="center">2018.11.11</th>
                                </tr>
                                <tr>
                                    <th class="center">3</th>
                                    <th class="title">浣花溪1111111111111</th>
                                    <th class="center">代审</th>
                                    <th class="center">2018.11.11</th>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                </div>
                <div class="panel panel-default one-box">
                    <div class="panel-heading">新闻公告</div>
                    <div class="table-box">
                        <table class="table">
                            <thead>
                                <tr>
                                    <th class="wb10 center">#</th>
                                    <th class="wb70">标题</th>
                                    <th class="wb20 center">时间</th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr v-for="(item,i) in newsList" :key='i' @click="newsPage(item)">
                                    <th class="center">{{i+1}}</th>
                                    <th class="title">{{item.post_title}}</th>
                                    <th class="center">{{item.time}}</th>
                                </tr>
                                <tr>
                                    <th>暂无数据</th>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                </div>
            </div> -->

        </div>
        <div class="tips-box" v-show="showTips" @click="() => this.showTips = false">
            <div class="tips">{{msg}}</div>
        </div>
        <div class="loading" v-show="!complete">
            <div class="spinner">
                <div class="spinner-container container1">
                    <div class="circle1"></div>
                    <div class="circle2"></div>
                    <div class="circle3"></div>
                    <div class="circle4"></div>
                </div>
                <div class="spinner-container container2">
                    <div class="circle1"></div>
                    <div class="circle2"></div>
                    <div class="circle3"></div>
                    <div class="circle4"></div>
                </div>
                <div class="spinner-container container3">
                    <div class="circle1"></div>
                    <div class="circle2"></div>
                    <div class="circle3"></div>
                    <div class="circle4"></div>
                </div>
            </div>
        </div>
        <!-- <iframe id="test-iframe" v-if="openIframe" :src="iframeSrc" frameborder="0" style="display: none" @load="getMsgData" ref="msgBox"></iframe> -->
    </div>
    <script src="./static/js/jquery-3.3.1.min.js"></script>
    <script src="./static/js/bootstrap.js"></script>
    <script src="./static/js/vue.min.js"></script>
    <script src="./static/js/axios.min.js"></script>
    <script src="./static/api/api.js"></script>
    <script src="./static/js/prism.js"></script>
    <script src="./static/js/spop.min.js"></script>
    <script src="http://oa.cddfct.com:8088/OAapp/OaMsgTraceService.go?userShowId=admin&listNum=5"></script>
    <script>
        var indexApp = new Vue({
            el: '#index',
            data() {
                return {
                    complete: false,
                    time: this.timeFormat('hh:mm'),
                    date: this.timeFormat('yyyy.MM.dd'),
                    week: this.timeFormat('D'),
                    menu: [],
                    imgBaseUrl: api.baseUrl,
                    baseUrl: api.baseUrl,
                    msg: '请在电脑端进行该操作 !',
                    showTips: false,
                    roles: store.fetch('userLoginInfo').roles,
                    userData: store.fetch('userLoginInfo'),
                    userInfo: store.fetch('userData'),
                    newsList: [],
                    msgList: [],
                    msgLoading: false,
                    openIframe: false,
                    iframeSrc: ''
                }
            },
            created() {
                this.safety();
            },
            mounted() {
                this.getDate();
                this.getNewsList();
                this.getMsgList();
                this.getMenu();
            },
            methods: {
                //时间格式化
                timeFormat(fmt, type = 1, time = 0) {
                    if (type === 1) {
                        var date = new Date();
                    } else {
                        var date = new Date(parseInt(time) * 1000);
                    }
                    let week = {
                        0: '日',
                        1: '一',
                        2: '二',
                        3: '三',
                        4: '四',
                        5: '五',
                        6: '六'
                    }
                    var o = {
                        "M+": date.getMonth() + 1, //月份 
                        "d+": date.getDate(), //日 
                        "h+": date.getHours(), //小时 
                        "m+": date.getMinutes(), //分 
                        "s+": date.getSeconds(), //秒 
                        "q+": Math.floor((date.getMonth() + 3) / 3), //季度 
                        "S": date.getMilliseconds(), //毫秒
                        "D": week[date.getDay()]
                    };
                    if (/(y+)/.test(fmt))
                        fmt = fmt.replace(RegExp.$1, (date.getFullYear() + "").substr(4 - RegExp.$1.length));
                    for (var k in o)
                        if (new RegExp("(" + k + ")").test(fmt))
                            fmt = fmt.replace(RegExp.$1, (RegExp.$1.length == 1) ? (o[k]) : (("00" + o[k])
                                .substr(("" + o[k]).length)));
                    return fmt;
                },

                //动态获取时间、
                getDate() {
                    setInterval(() => {
                        this.time = this.timeFormat('hh:mm');
                        this.date = this.timeFormat('yyyy.MM.dd');
                        this.week = this.timeFormat('D')
                    }, 1000)
                },

                //提示通知
                通知(title, msg, type) {
                    spop({
                        template: '<h4 class="spop-title">' + title + '</h4>' + msg,
                        style: type,
                        autoclose: 3000
                    });
                },

                safety() {
                    let body = {
                        userName: this.userInfo.userName,
                        password: this.userInfo.password
                    }
                    api.login(body).then(res => {
                        if (res.data.status == 'success') {
                            if (res.data.data.userAuthority != this.roles) {
                                alert('登录数据错误，请重新登录！');
                                store.clear('userLoginInfo');
                                store.clear('userData');
                                window.location.href = './login.html';
                            }
                        } else {
                            alert('登录数据错误，请重新登录！');
                            store.clear('userLoginInfo');
                            store.clear('userData');
                            window.location.href = './login.html';
                        }
                    })
                },

                //获取菜单模块
                getMenu() {
                    let _vm = this;
                    let menu = [];
                    api.getMenuList().then(res => {
                        if (res.data.status == 'success') {
                            menu = res.data.data;
                            for (const i in menu) {
                                menu[i].style = `
                                    background-color:${menu[i].color};
                                `
                            }
                            this.menu = menu;
                            this.complete = true;
                        } else {
                            this.通知('错误', '服务器开小差了请稍后再试！', 'error')
                        }
                    }).catch(err => {
                        this.complete = true;
                        this.reload()
                        this.通知('错误', '服务器开小差了请稍后再试！', 'error')
                    })

                },

                //判断菜单权限
                menuConfig(menuName) {
                    let re = new RegExp(menuName);
                    return re.test(this.roles);
                },

                //点击菜单
                clickMenu(item) {
                    if (window.timer) {
                        clearTimeout(window.timer);
                    };
                    if (!item.phone) {
                        let reg = /Android|webOS|iPhone|iPod|BlackBerry/;
                        if (reg.test(navigator.userAgent)) {
                            this.showTips = true;
                            window.timer = setTimeout(() => {
                                this.showTips = false;
                            }, 1500)
                            return false;
                        };
                    }
                    if (item.newWindow == '1') {
                        window.open(item.url);
                    } else {
                        // window.location.href = '.' + item.url;
                        let re = /http/;
                        let re2 = /www./;
                        console.log(re2.test(item.url))
                        if (re.test(item.url) || re2.test(item.url)) {
                            window.location.href = 'http://' + item.url;
                        } else {
                            window.location.href = '.' + item.url;
                        }
                    }
                },

                //账户设置
                setAccount() {
                    window.location.href = './setAccount.html'
                },

                //登出
                logout() {
                    store.clear('userLoginInfo');
                    store.clear('userData');
                    window.location.href = './login.html'
                },

                //重新加载
                reload() {
                    if (window.reloadTimer) {
                        clearTimeout(window.reloadTimer)
                    }
                    window.reloadTimer = setTimeout(() => {
                        this.getNewsList();
                        this.getMenu();
                    }, 1000 * 60 * 1)
                },

                //获取新闻列表
                getNewsList() {
                    let sortByKey = (arr, key) => {
                        return arr.sort((a, b) => {
                            let x = a[key];
                            let y = b[key];
                            return ((x > y) ? -1 : ((x < y) ? 1 : 0));
                        })
                    }
                    let body = {
                        type: '2'
                    };
                    api.getNews(body).then(res => {
                        if (res.data.status == 'success') {
                            let data = res.data.data;
                            if (data.length > 0) {
                                let list = [];
                                for (const item of data) {
                                    let one = item;
                                    one.time = this.timeFormat('yyyy-MM-dd', 2, one.post_mod_time);
                                    if (list.length < 5) {
                                        list.push(one)
                                    }
                                }
                                this.newsList = list;
                                this.newsList = sortByKey(this.newsList, 'post_mod_time')
                            }
                            // let body2 = {
                            //     type: '1'
                            // }
                            // api.getNews(body2).then(res => {
                            //     if(res.data.status == 'success') {
                            //         let data = res.data.data;
                            //         if(data.length > 0) {
                            //             let list = [];
                            //             for (const item of data) {
                            //                 let one = item;
                            //                 one.time = this.timeFormat('yyyy-MM-dd',2,one.post_mod_time); 
                            //                 if(list.length < 5) {
                            //                     list.push(one)
                            //                 }
                            //             }
                            //             this.newsList = this.newsList.concat(list);
                            //         }
                            //         this.newsList = sortByKey(this.newsList,'post_mod_time')
                            //     }else {
                            //         this.通知('错误','服务器开小差了请稍后再试！','error')
                            //     }
                            // }).catch(err => {
                            //     this.reload()
                            //     this.通知('错误','服务器开小差了请稍后再试！','error')
                            // })
                        } else {
                            this.通知('错误', '新闻公告获取失败，请稍后再试！', 'error')
                        }
                    }).catch(err => {
                        this.reload()
                        this.通知('错误', '服务器开小差了请稍后再试！', 'error')
                    })

                },

                newsPage(item) {
                    window.open(item.post_url || item.openPath)
                },

                //获取用户OA消息
                getMsgList() {
                    let body = {
                        user_name: this.userData.userName,
                        // user_name: 'administrator',
                        list_num: 5
                    };
                    this.msgLoading = true;
                    api.getMsg(body).then(res => {
                        this.msgLoading = false;
                        if (res.data.status == 'success') {
                            let data = res.data.data;
                            this.msgList = data;
                        }
                    }).catch(err => {
                        this.msgLoading = false;
                        this.通知('错误', '办公协同消息加载失败，请稍后再试！', 'error')
                    })
                },

                getMsgData() {
                    let data1 = this.$refs['msgBox'].contentWindow;
                    let data2 = data1.toString();
                    console.log(data2);
                }
            }
        })
    </script>
</body>

</html>